<template>
	<div class="rollimg">
	     <!-- 轮播图组件 -->
	     <div class="rockimg1 swiper-container">
			 <!-- 使用swiper轮播图组件 -->
	     	 <div class="swiper-wrapper">  	 	
							<div class="swiper-slide">
							   <router-link to="/shopsGoods/3232323c000">
								<img src="../../../static/rollImg/rollSale/8600a274.jpg" alt="">
							   </router-link>
							</div>	
							
							
							<div class="swiper-slide">
							   <router-link to="/shopsGoods/656336844">
								<img src="../../../static/rollImg/rollSale/bb9c5fc.jpg">
							   </router-link>
							</div>
						

							<div class="swiper-slide">
								<router-link to="/clothesGoods/6467fg">
								<img src="../../../static/rollImg/rollSale/3.jpg" alt="">
								</router-link>
							</div>

							<div class="swiper-slide">
								<router-link to="/shopsGoods/kkxc000">
								<img src="../../../static/rollImg/rollSale/4.jpg" >
								</router-link>
							</div> 

							 <div class="swiper-slide">
								<router-link to="/rollsale1">
										<img src="../../../static/rollImg/rollSale/119a103.jpg" alt="">
								</router-link>						
	                         </div>
              </div>
	     	 <!-- 分页器 -->
	     	 <div class="swiper-pagination"></div>
	  
	     </div>
	</div>
</template>

 <script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';

	export default {
		data() {
			return {
				  imgarr:[{src:'../../../static/rollImg/0be3917e3d42ea3e50ebc1ba6deb175f6119a103.jpg'},
				  {src:'../../../static/rollImg/2.jpg'},
				  {src:'../../../static/rollImg/c7b16db2133ab7502c12122abdcba0254bb9c5fc.jpg'},
				  {src:'../../../static/rollImg/7d32cd14092e8976988d6f90a95b4d608600a274.jpg'},
				  {src:'../../../static/rollImg/4.jpg'},]
			}
		},
		methods:{

		},
		    mounted() {
		    	                 var mySwiper = new Swiper('.swiper-container', {
								autoplay: true,//可选选项，自动滑动

								pagination: {
										    el: '.swiper-pagination',
										    clickable :true,

										  }
                                                                                })
		    }
   }
</script>
<style >
.rollimg{
	width: 1000px;
	height: 400px;
   margin-top:20px;
    position: relative;
   overflow: hidden;
   box-shadow: 0 0 10px black;
}
.rockimg1{
	position: relative;
	width: 1000px;
	height: 400px;
}
.rockimg_img{
		position: absolute;
		
			}


	/*分页器小点颜色*/
		.swiper-pagination-bullet{
		background-color: #333;
	}
</style>